<template>
  <!-- ISV支付配置 -->
  <div class="isv-config">
    <!-- 导航 -->
    <!-- <tz-breadcrumb :title='["商家", "支付通道实例","添加支付通道实例"]'></tz-breadcrumb> -->
    <tz-breadcrumb  :pathArr='[{"name": "商家"},{"name": "支付通道实例", "url": ""},{"name": "添加支付通道实例", "url": "/payways-case-add"}]'></tz-breadcrumb>
    <!-- 数据表单 -->
    <div style="margin: 20px;"></div>
    <el-card class="box-card">
      <!-- <div slot="header" class="clearfix">
    <span>ISV服务商-各支付渠道配置</span>
    <el-button style="float: right; padding: 3px 0" type="text"></el-button>
  </div> -->
      <div class="text item">
        <el-tabs :value="paywayType"
                 @tab-click="handleClick"
                 v-loading="loading">
          <el-tab-pane label="支付宝官方"
                       name="g_alipay">
            <!-- 支付宝官方配置 -->
            <el-tag type="warning">提示：请使用商户企业支付宝或个人支付宝扫码授权</el-tag>
            <div style="margin: 20px;"></div>
            <!--<el-form :label-position="labelPosition"  label-width="120px">-->
            <el-form label-width="120px">
              <el-form-item label="选择商户">
                <el-select v-model="weixin.store_code"
                           placeholder="请选择对应的商户"
                           v-on:change="alipayOnCheck()">
                  <el-option v-for="item in options"
                             :key="item.store_code"
                             :label="item.store_name"
                             :value="item.store_code">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="扩展商户二维码">
                <div>
                  <img :src="imgQr"
                       v-if="imgQr"
                       width="200px"
                       height="200px">
                </div>
              </el-form-item>
              <!--<el-form-item label="费率">-->
              <!--<el-input  class="form-input" placeholder="0.006"></el-input>-->
              <!--</el-form-item>-->
              <!--<el-form-item>-->
              <!--<el-button type="primary" @click="onSubmit">保存</el-button>-->
              <!--</el-form-item>-->
            </el-form>
            <div style="margin: 20px;"></div>

          </el-tab-pane>

          <el-tab-pane label="微信支付官方"
                       name="g_weixin"
                       :lazy=true>
            <!-- 微信支付官方配置 -->
            <el-tag type="warning">重要提醒：请确保填写的微信商户号一定归属于这个商户</el-tag>
            <div style="margin: 20px;"></div>
            <el-form label-width="120px">
              <el-form-item label="选择商户">
                <el-select v-model="weixin.store_code"
                           placeholder="请选择对应的商户">
                  <el-option v-for="item in options"
                             :key="item.store_code"
                             :label="item.store_name"
                             :value="item.store_code">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="微信商户号">
                <el-input v-model="weixin.mch_id"
                          placeholder="必填"></el-input>
              </el-form-item>
              <el-form-item label="费率">
                <el-input v-model="weixin.rate"
                          placeholder="必填"></el-input>
              </el-form-item>
              <el-form-item label="公众号">
                <el-input v-model="weixin.app_id"
                          placeholder="选填"></el-input>
              </el-form-item>
              <el-form-item label="微信open_id">
                <el-input v-model="weixin.open_id"
                          placeholder="选填"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary"
                           @click="onWeixinSubmit"
                           v-loading.fullscreen.lock="fullscreenLoading">保存</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="盛付通银行"
                       name="g_sfbank"
                       :lazy=true>
            <!-- 盛付通银行官方配置 -->
            <el-tag type="warning">重要提醒：请确保填写的商户号一定归属于这个商户</el-tag>
            <div style="margin: 20px;"></div>
            <el-form label-width="120px">
              <el-form-item label="选择商户">
                <el-select v-model="weixin.store_code"
                           placeholder="请选择对应的商户">
                  <el-option v-for="item in options"
                             :key="item.store_code"
                             :label="item.store_name"
                             :value="item.store_code">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="盛付通商户号">
                <el-input v-model="weixin.mch_id"
                          placeholder="必填"></el-input>
              </el-form-item>
              <el-form-item label="费率">
                <el-input v-model="weixin.rate"
                          placeholder="必填"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary"
                           @click="onWeixinSubmit"
                           v-loading.fullscreen.lock="fullscreenLoading">保存</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="微信小微商户"
                       name="min_weixin">
            <!-- 微信小微商户 -->
            暂未开放
          </el-tab-pane>
          <el-tab-pane   label="网商银行"
                       name="g_mybank"
                       :lazy=true>
            <!-- 盛付通银行官方配置 -->
             <el-tag type="warning">重要提醒：请确保填写的商户号一定归属于这个商户 </el-tag>
             <a class="internetBankEnter" @click="jumpInternetBank">还没有入住网商银行，点击此处去入驻</a>
             
            <div style="margin: 20px;"></div> 
             <el-form label-width="120px">
              <el-form-item label="选择商户">
                <el-select v-model="mybank.store_code"
                           placeholder="请选择对应的商户">
                  <el-option v-for="item in options"
                             :key="item.store_code"
                             :label="item.store_name"
                             :value="item.store_code">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="商户号">
                <el-input v-model="mybank.mch_id"
                          placeholder="必填"
                          style="width:217px"></el-input>
              </el-form-item>
              <el-form-item label="费率">
                <el-input v-model="mybank.rate"
                          placeholder="必填"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary"
                           @click="onMybankSubmit"
                           v-loading.fullscreen.lock="fullscreenLoading">保存</el-button>
              </el-form-item>
            </el-form> 
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>

  </div>
</template>

<script>
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
import http from './../../config/index';
import api from './../../api/api';
export default {
  mounted: function () {
    this.initdata();
    this.getStorelist();
    if (this.$route.query.type) {
      this.setStore();
    }
    // this.
  },
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  data: () => {
    return {
      alipay: {},
      weixin: {
        port: 'web',
        mch_id: '',
        rule: '0.006',
        store_code: '',
        app_id: '',
        open_id: '',
        payways_case_type: 'g_weixin',
        status: 1
      },
      mybank: {
        mch_id: '',
        store_code: '',
        status: 1,
        payways_case_type: 'g_mybank',
        rate: ''
      },
      labelPosition: '',
      loading: false,
      cert_path: [],
      key_path: [],
      options: {},
      imgQr: '',
      paywayType: 'g_alipay',
      fullscreenLoading: false
    };
  },
  methods: {
    // 跳转到网商银行
    jumpInternetBank () {
      let that = this;
      console.log(1919);
      this.$router.push({
        path: '/internet-bank-add-set',
        query: {
          // id: that.$route.query.id,
          store_code: that.$route.query.store_code
          // order_no: that.$route.order_no
        }
      });
    },
    setStore () {
      let that = this;
      that.mybank.store_code = that.$route.query.store_code;
      that.weixin.store_code = that.$route.query.store_code;
      that.paywayType = that.$route.query.type;
      that.getQr();
    },
    // **************************************微信开始******************************************/
    getStorelist () {
      let that = this;
      http.get(api.merchantIndex, {
        token: localStorage.getItem('token'),
        pagesize: 100000
      }, response => {
        console.log(response);
        if (response.code === 10001 || response.code === '10001') {
          console.log(response.data[0].res.data);
          that.options = response.data[0].res.data;
        } else {
          that.$message({
            message: response.msg,
            type: 'warning'
          });
        }
      }, err => {
        console.log(err);
      });
    },
    onWeixinSubmit () {
      this.setWeixinPayway();
    },
    setWeixinPayway () {
      let that = this;
      that.fullscreenLoading = !that.fullscreenLoading;
      http.post(api.CreateWeixinWays, {
        token: localStorage.getItem('token'),
        port: that.weixin.port,
        mch_id: that.weixin.mch_id,
        rate: that.weixin.rate,
        store_code: that.weixin.store_code,
        app_id: that.weixin.app_id,
        open_id: that.weixin.open_id,
        payways_case_type: that.weixin.payways_case_type,
        status: that.weixin.status
      }, response => {
        that.fullscreenLoading = !that.fullscreenLoading;
        console.log(response);
        if (response.code === 10001 || response.code === '10001') {
          that.$message({
            message: '操作成功',
            type: 'success'
          });
        } else {
          that.$message({
            message: response.msg,
            type: 'warning'
          });
        }
      }, err => {
        console.log(err);
        that.fullscreenLoading = !that.fullscreenLoading;
      });
    },
    // **************************************微信结束******************************************/
    // **************************************网商开始******************************************/
    onMybankSubmit () {
      this.setMybankPayway();
    },
    setMybankPayway () {
      let that = this;
      that.fullscreenLoading = !that.fullscreenLoading;
      http.post(api.MybankWays, {
        token: localStorage.getItem('token'),
        store_code: that.mybank.store_code,
        mch_id: that.mybank.mch_id,
        payways_case_type: that.mybank.payways_case_type,
        status: that.mybank.status,
        rate: that.mybank.rate
      }, response => {
        that.fullscreenLoading = !that.fullscreenLoading;
        console.log(response);
        if (response.code === 10001 || response.code === '10001') {
          that.$message({
            message: '操作成功',
            type: 'success'
          });
        } else {
          that.$message({
            message: response.msg,
            type: 'warning'
          });
        }
      }, err => {
        console.log(err);
        that.fullscreenLoading = !that.fullscreenLoading;
      });
    },
    // **************************************网商开始******************************************/
    // **************************************支付宝开始****************************************/
    alipayOnCheck () {
      this.getQr();
    },
    // 获取支付宝授权二维码
    getQr () {
      let that = this;
      http.post(api.AlipayAuthCode, {
        token: localStorage.getItem('token'),
        store_code: that.weixin.store_code,
        is_qr: 1
      }, response => {
        console.log(response);
        // if (response.code === 10001 || response.code === '10001') {
        that.imgQr = response;
        // } else {
        //   that.$message({
        //     message: response.msg,
        //     type: 'warning'
        //   });
        // }
      }, err => {
        console.log(err);
      });
    },
    // **************************************支付宝结束****************************************/
    initdata: function () {
      // console.log('aa');
      // this.getData(api.getAlipayConf);
      // this.getData(api.getwechatpayconfig);
    },
    handleClick (tab, event) {
      console.log(tab.label);
      if (tab.name === 'alipay' && Object.keys(this.alipay).length === 0) {
        // this.getData(api.getAlipayConf);
      } else if (tab.name === 'weixin' && Object.keys(this.weixin).length === 0) {
        // this.getData(api.getwechatpayconfig);
      }
      // if (tab.label === '网商银行') {
      //   let that = this;
      //   console.log(1919);
      //   this.$router.push({
      //     path: '/internet-bank-add-set',
      //     query: {
      //       // id: that.$route.query.id,
      //       store_code: that.$route.query.store_code
      //       // order_no: that.$route.order_no
      //     }
      //   });
      // }
    },
    handleFile () {
      // console.log(this.fileList[0]);
    },
    cert_path_file (file, fileList) {
      this.cert_path = fileList;
    },
    key_path_file (file, fileList) {
      this.key_path = fileList;
    },
    clearUploadedImage (type) {
      if (type === 'upload') {
        this.$refs.upload.clearFiles();
        this.cert_path = [];
      } else if (type === 'upload1') {
        this.$refs.upload1.clearFiles();
        this.key_path = [];
      }
    },
    onSubmit (type) {
      let data = {};
      let url = '';
      if (type === 'alipay') {
        url = api.setalipayconfig;
        data = {
          'id': this.alipay.id,
          'app_id': this.alipay.app_id,
          'pid': this.alipay.pid,
          'rsaPrivateKey': this.alipay.rsaPrivateKey,
          'alipayrsaPublicKey': this.alipay.alipayrsaPublicKey,
          'callback': this.alipay.callback,
          'operate_notify_url': this.alipay.operate_notify_url,
          'notify': this.alipay.notify
        };
        data.token = localStorage.getItem('token');
        this.setData(url, data);
      }

      if (type === 'weixin') {
        url = api.setwechatpayconfig;
        let form = this.$refs['weixinForm'].$el;
        let formData = new FormData(form);
        formData.append('token', localStorage.getItem('token'));
        formData.append('id', this.weixin.id);
        formData.append('app_id', this.weixin.app_id);
        formData.append('merchant_id', this.weixin.merchant_id);
        formData.append('secret', this.weixin.secret);
        formData.append('key', this.weixin.key);
        formData.append('notify_url', this.weixin.notify_url);
        formData.append('cert_path', this.cert_path[0] ? this.cert_path[0].raw : '');
        formData.append('key_path', this.key_path[0] ? this.key_path[0].raw : '');
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        };
        http.form(url, formData, config, response => {
          // console.log(response.data);
          this.loading = false;
          if (response.code === '10001') {
            this.cert_path = [];
            this.key_path = [];
            this.$message('设置完成');
          } else {
            this.$message.error(response.msg);
          }
        }, () => {
          this.$message.error('网络错误');
          this.loading = false;
        });
      }
    },
    setData (url, data) {
      let that = this;
      this.loading = true;
      http.post(url, data, response => {
        that.loading = false;
        if (response.code === '10001') {
          that.$message('设置完成');
        } else {
          that.$message.error('设置失败');
        }
      }, () => {
        that.$message.error('网络错误');
        that.loading = false;
      });
    },
    getData (url) {
      let that = this;
      that.loading = true;
      http.get(url, {
        token: localStorage.getItem('token')
      }, response => {
        that.loading = false;
        if (response.code === '10001') {
          switch (url) {
            case '/system/getalipayconfig':
              that.alipay = response.data[0];
              break;
            case '/system/getwechatpayconfig':
              that.weixin = response.data[0];
              break;
          }
        }
      }, () => {
        that.$message.error('网络错误');
        that.loading = false;
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.form
  padding 2rem
  padding-right 200px
  margin-top 15px
  margin-bottom 12px
  box-sizing border-box
  background #fff
  box-shadow 1px 1px 1px #999
  .form-item
    display inline-block
    margin-right 35px
    label
      font-size 14px
      color #333
      width 200px
      display inline-block
    .form-input, .form-select
      width 200px
  .line
    height 15px
.server-item
  width 20px
  height 20px
  margin 5px
.internetBankEnter
  color: #409eff
  text-decoration: underline
  cursor: pointer
  margin-left: 10px
</style>
